<template>
  <!-- vue 放置视图文件， -->
  <div class="container">
    {{ msg }}
    <div class="tab-header">
      <template v-for="(item, index) in tabList" :key="item">
        <span @click="handClick(index)" :class="tabIndex === index ? 'active' : ''">{{ item }}</span>
      </template>
    </div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      msg: 'hello Vue!',
      tabList: ['正在上映', '即将上映'],
      tabIndex: 0,
    }
  },
  created() {
    axios.get('/api/shopCount').then((res) => {
      console.log('res:', res)
    })
  },
  methods: {
    handClick(index) {
      this.tabIndex = index
    },
  },
}
</script>

<style lang="scss">
.tab-header span {
  display: inline-block;
  padding: 10px;
  margin: 5px;
  background: lightcoral;
  color: white;
  border-radius: 5px;
}
.tab-header .active {
  background: red;
  color: wheat;
}
</style>
